<template>
    <div class="Worker-container">
        <Upload btnName="选择文件进行分片" @receiveFileList="revFile" />
        <div v-show="isBeginingCutting" class="message">
            <img v-show="doesCuttingEnd" src="@/assets/complete.png" alt="" />
            <div
                v-show="!doesCuttingEnd"
                class="loading"
                ref="lottieLoading"
                id="loading"
            ></div>
            <span>{{
                doesCuttingEnd ? "切分完毕，请查看控制台！" : "正在切分中。。。"
            }}</span>
        </div>
    </div>
</template>
<script>
import FileWorker from "./fileWorker.worker";

import Upload from "../FileLoader/UploadBtn.vue";
import animation from "@/assets/json/loading.json";
export default {
    name: "",
    components: {
        Upload,
    },
    data() {
        return {
            file: null,
            fragmentations: null,
            isBeginingCutting: false,
            doesCuttingEnd: true,
        };
    },
    created() {},
    mounted() {
        this.$nextTick(() => {
            this.$lottie.loadAnimation({
                container: document.querySelector("#loading"), // 包含动画的dom元素
                autoplay: true, // 自动播放
                animationData: animation,
            });
        });
    },
    computed: {},
    watch: {},
    methods: {
        openWorkerToSplit(file) {
            if (!this.doesCuttingEnd)
                return alert("正在切片中请结束后再次点击！");
            this.doesCuttingEnd = false;
            this.isBeginingCutting = true;
            //最大线程数
            const maxWorkers = 12;
            //文件每片5M
            const chunkSize = 5 * 1024 * 1024;
            //文件一共分成多少片
            const chunkLength = Math.ceil(file.size / chunkSize);
            //每个线程处理几片
            const workerChunks = Math.ceil(chunkLength / maxWorkers);
            //记录当前有几个线程处理完毕
            let count = 0;
            //最终处理完毕分片数据
            const result = [];
            //1.开启最大线程数量
            for (let i = 0; i < maxWorkers; i++) {
                //2.记录当前线程要处理的片的开始点
                let startIndex = i * workerChunks;
                //3.记录当前线程要处理的片的结束点
                let endIndex = startIndex + workerChunks;
                //4.如果结束点大于文件分成的总片数，说明结束点超了，让他等于
                if (endIndex > chunkLength) {
                    endIndex = chunkLength;
                }
                const worker = new FileWorker();
                worker.onmessage = (e) => {
                    const fragmentations = e.data;
                    fragmentations.forEach((item) => {
                        //用返回的每片的下标，定位存到数组的指定位置，保证切片的顺序
                        result[item.index] = item;
                    });
                    worker.terminate();
                    count++;
                    if (count === maxWorkers) {
                        //TODO 后续操作
                        console.log(result);
                        this.doesCuttingEnd = true;
                    }
                };
                worker.postMessage({ file, chunkSize, startIndex, endIndex });
            }
        },
        revFile(files) {
            if (files[0]) {
                this.openWorkerToSplit(files[0]);
            }
        },
    },
};
</script>
<style lang="less" scoped>
@import "~@/styles/mixins.less";
.Worker-container {
    width: 300px;
    height: 300px;
    .self-center();
    box-shadow: 4px 4px 5px rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);
    flex-direction: column;
    row-gap: 20px;
    .message {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 40px;
        overflow: hidden;
        img {
            width: 20px;
            margin-right: 10px;
        }
        .loading {
            width: 40px;
        }
    }
}
</style>
